import { Graph, Markup } from '@antv/x6'
import '@antv/x6-vue-shape'
import RuleNode from './ruleNode.vue'
import CubeNode from './cubeNode.vue'
import ParallelNode from './parallelNode.vue'
import Platform from '../../utils/platform'

const portMarkup = Platform.IS_SAFARI ? { tagName: 'circle', selector: 'circle', attrs: { r: 5, fill: '#fff', stroke: '#30323e', strokeWidth: 3, magnet: true } } : [Markup.getForeignObjectMarkup()]
const fo = Platform.IS_SAFARI ? { magnet: 'true', width: 12, height: 12, x: 0, y: 0 } : { magnet: 'true', width: 16, height: 16, x: -8, y: -8 }

Graph.registerNode('rule-node', {
  inherit: 'vue-shape',
  width: 200,
  height: 56,
  component: {
    template: '<rule-node />',
    components: {
      RuleNode
    }
  },
  portMarkup,
  ports: {
    groups: {
      in: {
        position: 'left',
        attrs: {
          fo
        }
      },
      out: {
        position: 'right',
        attrs: {
          fo
        }
      }
    }
  }
})

Graph.registerNode('cube-node', {
  inherit: 'vue-shape',
  width: 56,
  height: 56,
  component: {
    template: '<cube-node />',
    components: {
      CubeNode
    }
  },
  portMarkup,
  ports: {
    groups: {
      in: {
        position: 'left',
        attrs: {
          fo
        }
      },
      out: {
        position: 'right',
        attrs: {
          fo
        }
      }
    }
  }
})

Graph.registerNode('parallel-node', {
  inherit: 'vue-shape',
  component: {
    template: '<parallel-node />',
    components: {
      ParallelNode
    }
  },
  attrs: {
    body: {
      fill: '#f3f4f600'
    }
  }
})

Graph.registerNode('stage-node', {
  inherit: 'rect',
  markup: [
    {
      tagName: 'rect',
      selector: 'body'
    },
    {
      tagName: 'rect',
      selector: 'name-rect'
    },
    {
      tagName: 'text',
      selector: 'name-text'
    }
  ],
  attrs: {
    body: {
      fill: '#f3f4f600',
      stroke: '#ccc',
      strokeWidth: 1
    },
    'name-rect': {
      width: 40,
      fill: '#fff',
      stroke: '#ccc',
      strokeWidth: 1,
      x: -1
    },
    'name-text': {
      ref: 'name-rect',
      refY: 0.5,
      refX: 0.5,
      textAnchor: 'middle',
      textVerticalAnchor: 'middle',
      fill: '#282828',
      fontSize: 14,
      style: {
        'writing-mode': 'tb'
      }
    }
  }
})
